<template>
    <div class="function">
        <ul>
            <li>Misc Functions （杂项函数）</li>
            <p>image-size(node)、image-width(node)、image-height(node)、data-uri 将一个资源内嵌到样式文件、default、svg-gradient 生成多停靠（stop）的svg渐变</p>
            <CustomTable :list="miscFunc"></CustomTable>
            <li>String Functions （字符串函数）</li>
            <p>escape 转义函数、% format （% 百分号格式化参数）格式化一个字符串、e 预判函数</p>
            <CustomTable :list="stringFunc"></CustomTable>
            <li>List Functions （列表函数）</li>
            <CustomTable :list="listFunc"></CustomTable>
            <li>Math Functions （数学函数）</li>
            <p>ceil 向上取整、floor 向下取整、round 四舍五入、sqrt 平方根、abs 绝对值、sin、asin、cos、acos、tan、atan、pi π、min 找最小值、max 找最大值</p>
            <CustomTable :list="mathFunc"></CustomTable>
            <li>Type Functions （类型函数）</li>
            <p>isnumber、isstring、iscolor、iskeyword 是否是关键字、isurl、ispixel、isem、ispercentage、isruleset 是否是规则集</p>
            <CustomTable :list="typeFunc"></CustomTable>
            <li>Color Definition Functions （颜色定义函数）</li>
            <p>argb 格式#AARRGGBB被用在IE滤镜中，以及.NET和Android开发中、hsv 色相与饱和度与色调、hsva</p>
            <CustomTable :list="colorDefinFunc"></CustomTable>
            <li>Color Channel Functions （颜色通道函数）</li>
            <p>hue 获取色相值、saturation 饱和度、lightness 亮度、hsvhue、hsvsaturation、hsvvalue、red、green、blue、alpha、luma/luminance 亮度的百分比表示、</p>
            <li>Color Operation Functions （颜色操作函数）</li>
            <p>desaturate 降低颜色饱和度、lighten 增加亮度、darken 降低亮度、fadein 降低颜色透明度、fadeout 增加透明度、fade 设定透明度、contrast 选择两种颜色相比较，得出哪种颜色的对比度最大就倾向于对比度最大的颜色</p>
            <CustomTable :list="colorOperateFunc"></CustomTable>
            <li>Color Blending Functions （颜色混合函数）</li>
            <p>multiply 变暗、screen 变亮、overlay 叠加 令浅的颜色变得更浅，深的颜色变得更深，结果由第一个颜色参数决定、softlight 柔光、hardlight 强光，结果由第二个颜色参数决定、difference 差值，输出结果是更深的颜色、exclusion 差值 比difference差别更小、average 对 RGB 的三种颜色值取平均值、negation 差值，输出结果是更亮的颜色</p>
        </ul>
    </div>
</template>

<script>
import CustomTable from '../custom/CustomTable'
export default {
    data() {
        return {
            miscFunc: [
                {
                    name: 'color',
                    decs: '将代表颜色的字符串转换为颜色值',
                    params: 'string',
                    return: 'color',
                    remark: 'color("#aaa");'
                },{
                    name: 'convert',
                    decs: '长度、时间、角度单位转换',
                    params: 'number带单位的浮点数、单位',
                    return: 'number',
                    remark: 'convert(14cm, mm); 无法转换则返回第一个参数'
                },{
                    name: 'unit',
                    decs: '移除或者改变属性值的单位',
                    params: '数字、单位',
                    return: '带单位的值',
                    remark: 'unit(5, px);得到5px，unit(5em)得到5'
                },{
                    name: 'get-unit',
                    decs: '得到一个值的单位',
                    params: '带单位的number',
                    return: '单位',
                    remark: 'get-unit(5px);得到px，get-unit(5)得到空'
                }
            ],
            stringFunc: [
                {
                    name: 'replace',
                    decs: '用另一个字符串替换文本',
                    params: '原字符串、正则表达式、替换的字符串、正则标识符',
                    return: '替换过值后的字符串',
                    remark: `replace('This is a string.', "(string)\.$", "new $1.");输出'This is a new string.';`
                },
            ],
            listFunc: [
                {
                    name: 'length',
                    decs: '返回集合中的值的数目',
                    params: '逗号或者空格隔开的值集合',
                    return: '集合的值个数',
                    remark: '类似数组'
                },
                {
                    name: 'extract',
                    decs: '返回集合中指定索引的值',
                    params: '逗号或者空格隔开的值集合、索引',
                    return: '指定索引的值',
                    remark: '类似数组'
                },
            ],
            mathFunc: [
                {
                    name: 'percentage',
                    decs: '将浮点数转换为百分比字符串',
                    params: 'number',
                    return: 'string',
                    remark: 'percentage(0.5)//50%'
                },
                {
                    name: 'pow',
                    decs: '乘方运算',
                    params: '基数、幂指数',
                    return: 'number 与基数单位相同 忽略指数单位',
                    remark: 'pow(25cm, 0.5px)//5cm '
                },
                {
                    name: 'mod',
                    decs: '取余运算',
                    params: 'number、number',
                    return: 'number 与num1单位相同 忽略num2单位',
                    remark: 'mod(11cm, 6px);//5cm'
                },
            ],
            typeFunc: [
                {
                    name: 'isunit',
                    decs: '是否是带指定单位的数字',
                    params: 'value、单位',
                    return: '布尔值',
                    remark: 'isunit(11px, px)//true'
                },
            ],
            colorDefinFunc: [
                {
                    name: 'rgb',
                    decs: '红绿蓝',
                    params: '0-255/0-100%',
                    return: '十六进制颜色值',
                    remark: 'rgb(90, 129, 32)//#5a8120'
                },
                {
                    name: 'rgba',
                    decs: '红绿蓝透明度',
                    params: '0-255/0-100%/0-1',
                    return: 'rgba自身',
                    remark: 'rgba(90, 129, 32, 0.5)'
                },
                {
                    name: 'hsl',
                    decs: '色相、饱和度、亮度',
                    params: '0-360/0-100%/0-1',
                    return: '十六进制颜色值',
                    remark: 'hsl(90, 100%, 50%)//#80ff00'
                },
                {
                    name: 'hsla',
                    decs: '色相、饱和度、亮度、透明度',
                    params: '0-360/0-100%/0-1',
                    return: 'rgba',
                    remark: 'hsl(90, 100%, 50%, 0.5)//rgba(128, 255, 0, 0.5)'
                },
            ],
            colorOperateFunc: [
                {
                    name: 'saturate',
                    decs: '增加颜色饱和度',
                    params: '颜色对象、百分比',
                    return: '十六进制颜色',
                    remark: 'saturate(hsl(90, 80%, 50%), 20%)//#80ff00'
                },
                 {
                    name: 'spin',
                    decs: '任意方向旋转颜色的色相角度',
                    params: '颜色对象、角度+-',
                    return: '十六进制颜色',
                    remark: 'spin(hsl(10, 90%, 50%), -30)'
                },
                {
                    name: 'mix',
                    decs: '根据比例混合两种颜色',
                    params: '颜色对象、颜色对象、平衡百分比',
                    return: '十六进制颜色',
                    remark: 'mix(#ff0000, #0000ff, 50%)//#800080'
                },
                {
                    name: 'greyscale',
                    decs: '完全移除颜色的饱和度',
                    params: '颜色对象',
                    return: '十六进制颜色',
                    remark: 'greyscale(hsl(90, 90%, 50%))// hsl(90, 0%, 50%)'
                }
            ],
        }
    },
    components: {
        CustomTable
    }
}
</script>

<style lang="less" scoped>
.function{
    text-align: left;
    overflow: scroll;
    height: calc(100% - 270px);
    ul{
        margin-top: 0;
        li{
            padding: 20px 0;
            // color: rgb(250, 167, 0);
            font-weight: bold;
            &:first-child{
                padding-top: 0;
            }
        }
        p{
            margin-top: 0;
        }
    }
}
</style>